<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="axios.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="">
    <style>

        *{
            margin:0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .main{
            height: 100%;
            display: flex;
        }

        .main .left{
            height: 100%;
            width: 300px;
            background-color: darkred;
            display: flex;
            flex-direction: column;
        }

        .main .right{
            flex: 1;
            background-color: #888888;
        }
        .main .left .head{
            height: 100px;
        }

        .main .left .menu{
            flex: 1;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">
            <div class="head">头部不懂</div>
            <div class="menu">
                <div v-for="item in 100">自适应</div>
            </div>
        </div>
        <div class="right"></div>
    </div>
</body>


<script>
    const routes= [{
        "id": 13,
        "name": "404",
        "title": "404",
        "remark": "404",
        "path": "/401",
        "component": "views/404/index.vue",
        "isMenu": 0,
        "icon": "House",
        "redirect": null,
        "meta": null,
        "sort": 0,
        "level": 1,
        "isAuth": null,
        "parentId": 0,
        "createTime": "2023-06-04T13:10:25",
        "updateTime": "2023-06-04T15:32:03",
        "children": null
    }, {
        "id": 14,
        "name": "login",
        "title": "登陆",
        "remark": "登陆",
        "path": "/login",
        "component": "views/Login/index.vue",
        "isMenu": 0,
        "icon": "House",
        "redirect": null,
        "meta": null,
        "sort": 1,
        "level": 1,
        "isAuth": null,
        "parentId": 0,
        "createTime": "2023-06-04T13:11:00",
        "updateTime": "2023-06-04T16:49:01",
        "children": null
    }, {
        "id": 15,
        "name": "404",
        "title": "404",
        "remark": "404",
        "path": "/:pathMatch(.*)*",
        "component": "views/404/index.vue",
        "isMenu": 0,
        "icon": "House",
        "redirect": null,
        "meta": null,
        "sort": 3,
        "level": 1,
        "isAuth": null,
        "parentId": 0,
        "createTime": "2023-06-04T13:11:50",
        "updateTime": "2023-06-04T16:48:56",
        "children": null
    }, {
        "id": 16,
        "name": "root",
        "title": "root",
        "remark": "根路径",
        "path": "/",
        "component": "layout/home/index.vue",
        "isMenu": 0,
        "icon": "House",
        "redirect": "/home",
        "meta": null,
        "sort": 2,
        "level": 1,
        "isAuth": null,
        "parentId": 0,
        "createTime": "2023-06-04T14:24:39",
        "updateTime": "2023-06-04T16:48:59",
        "children": [{
            "id": 1,
            "name": "home",
            "title": "首页",
            "remark": "首页",
            "path": "/home",
            "component": "views/Home/index.vue",
            "isMenu": 1,
            "icon": "House",
            "redirect": null,
            "meta": "{\"aa\":\"bb\"}",
            "sort": 0,
            "level": 2,
            "isAuth": null,
            "parentId": 16,
            "createTime": "2023-06-01T13:06:04",
            "updateTime": "2023-06-04T15:53:47",
            "children": null
        }, {
            "id": 2,
            "name": "system",
            "title": "系统管理",
            "remark": "系统管理",
            "path": "/system",
            "component": "views/System/index.vue",
            "isMenu": 1,
            "icon": "Location",
            "redirect": null,
            "meta": null,
            "sort": 1,
            "level": 2,
            "isAuth": null,
            "parentId": 16,
            "createTime": "2023-05-30T16:58:04",
            "updateTime": "2023-06-04T15:53:50",
            "children": [{
                "id": 10,
                "name": "systemmenu",
                "title": "菜单管理",
                "remark": "菜单管理",
                "path": "/system/menu",
                "component": "views/System/Menu/index.vue",
                "isMenu": 1,
                "icon": "Menu",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 2,
                "createTime": "2023-05-30T22:15:14",
                "updateTime": "2023-06-04T15:54:05",
                "children": null
            }, {
                "id": 17,
                "name": "systemroute",
                "title": "路由管理",
                "remark": "路由管理",
                "path": "/system/route",
                "component": "views/System/Route/index.vue",
                "isMenu": 1,
                "icon": "Setting",
                "redirect": null,
                "meta": null,
                "sort": 5,
                "level": 3,
                "isAuth": null,
                "parentId": 2,
                "createTime": "2023-06-04T15:56:26",
                "updateTime": "2023-06-04T16:13:12",
                "children": null
            }]
        }, {
            "id": 3,
            "name": "user",
            "title": "用户管理",
            "remark": "用户管理",
            "path": "/user",
            "component": "views/User/index.vue",
            "isMenu": 1,
            "icon": "User",
            "redirect": null,
            "meta": null,
            "sort": 5,
            "level": 2,
            "isAuth": null,
            "parentId": 16,
            "createTime": "2023-05-30T16:58:25",
            "updateTime": "2023-06-04T16:14:16",
            "children": [{
                "id": 8,
                "name": "userlist",
                "title": "用户列表",
                "remark": "用户列表",
                "path": "/user/list",
                "component": "views/User/List/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-05-30T17:01:10",
                "updateTime": "2023-06-04T15:54:02",
                "children": null
            }, {
                "id": 9,
                "name": "userpass",
                "title": "密码管理",
                "remark": "密码管理",
                "path": "/user/password",
                "component": "views/User/Password/index.vue",
                "isMenu": 1,
                "icon": "Lock",
                "redirect": null,
                "meta": null,
                "sort": 2,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-05-30T17:03:00",
                "updateTime": "2023-06-04T15:54:03",
                "children": null
            }, {
                "id": 11,
                "name": "useradd",
                "title": "用户添加",
                "remark": "用户添加",
                "path": "/user/add",
                "component": "views/User/Add/index.vue",
                "isMenu": 1,
                "icon": "Management",
                "redirect": null,
                "meta": null,
                "sort": 3,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-06-01T18:08:36",
                "updateTime": "2023-06-04T15:54:06",
                "children": null
            }, {
                "id": 12,
                "name": "useredit",
                "title": "用户修改",
                "remark": "用户修改",
                "path": "/user/edit",
                "component": "views/User/Edit/index.vue",
                "isMenu": 1,
                "icon": "Edit",
                "redirect": null,
                "meta": null,
                "sort": 4,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-06-02T16:53:31",
                "updateTime": "2023-06-04T15:54:09",
                "children": null
            }]
        }, {
            "id": 4,
            "name": "permission",
            "title": "权限管理",
            "remark": "权限管理",
            "path": "/permission",
            "component": "views/Permission/index.vue",
            "isMenu": 1,
            "icon": "Setting",
            "redirect": null,
            "meta": null,
            "sort": 3,
            "level": 2,
            "isAuth": null,
            "parentId": 16,
            "createTime": "2023-05-30T16:59:28",
            "updateTime": "2023-06-04T15:53:54",
            "children": [{
                "id": 5,
                "name": "permissionuser",
                "title": "用户管理",
                "remark": "用户管理",
                "path": "/permission/user",
                "component": "views/Permission/User/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": null,
                "sort": 0,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T16:59:54",
                "updateTime": "2023-06-04T15:53:56",
                "children": null
            }, {
                "id": 6,
                "name": "permissionrole",
                "title": "角色管理",
                "remark": "角色管理",
                "path": "/permission/role",
                "component": "views/Permission/Role/index.vue",
                "isMenu": 1,
                "icon": "Management",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T17:00:19",
                "updateTime": "2023-06-04T15:53:58",
                "children": null
            }, {
                "id": 7,
                "name": "permissionmenu",
                "title": "菜单管理",
                "remark": "菜单管理",
                "path": "/permission/menu",
                "component": "views/Permission/Menu/index.vue",
                "isMenu": 1,
                "icon": "Menu",
                "redirect": null,
                "meta": null,
                "sort": 2,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T17:00:40",
                "updateTime": "2023-06-04T15:54:00",
                "children": null
            }]
        }, {
            "id": 18,
            "name": "haha",
            "title": "Haha测试",
            "remark": "哈哈哈",
            "path": "/haha",
            "component": "views/Haha/index.vue",
            "isMenu": 1,
            "icon": "User",
            "redirect": null,
            "meta": "{\n\t\"hello\": \"world\"\n}",
            "sort": 1,
            "level": 1,
            "isAuth": null,
            "parentId": 16,
            "createTime": "2023-06-05T18:25:32",
            "updateTime": null,
            "children": [{
                "id": 29,
                "name": "xixi",
                "title": "Xixi测试",
                "remark": "xixi",
                "path": "/haha/xixi",
                "component": "views/Haha/Xixi/index.vue",
                "isMenu": 0,
                "icon": "User",
                "redirect": null,
                "meta": "{\n\t\"hello\": \"world\"\n}",
                "sort": 0,
                "level": 2,
                "isAuth": null,
                "parentId": 18,
                "createTime": "2023-06-05T19:10:02",
                "updateTime": null,
                "children": null
            }]
        }]
    }, {
        "id": 28,
        "name": "hah",
        "title": "hah",
        "remark": "hah",
        "path": "/h1",
        "component": "views/haha/hah.vue",
        "isMenu": 0,
        "icon": "Setting",
        "redirect": null,
        "meta": "{\n\t\"hello\": \"world\"\n}",
        "sort": 0,
        "level": 1,
        "isAuth": null,
        "parentId": 0,
        "createTime": "2023-06-05T18:56:36",
        "updateTime": "2023-06-05T18:59:55",
        "children": null
    }];
    new Vue({
        el:".main",
        data:{

        }
    })

    const parentPath=[]




    function getParentPath(path,list,parentPath){
        if(!list||list.length===0)return null
        const item=list.filter(item=>item.path===path)[0]
        if(item){
            parentPath.push(item)
            return item
        }else{
            for(let item of list){
                const result=getParentPath(path,item.children,parentPath)
                if(result){
                    parentPath.push(item)
                    return item
                }
            }
        }
    }


    const data=[
            {
                "id": 1,
                "name": "home",
                "title": "首页",
                "remark": "首页",
                "path": "/home",
                "component": "views/Home/index.vue",
                "isMenu": 1,
                "icon": "House",
                "redirect": null,
                "meta": "{\"aa\":\"bb\"}",
                "sort": 0,
                "level": 2,
                "isAuth": null,
                "parentId": 16,
                "createTime": "2023-06-01T13:06:04",
                "updateTime": "2023-06-04T15:53:47"
            },
            {
                "id": 2,
                "name": "system",
                "title": "系统管理",
                "remark": "系统管理",
                "path": "/system",
                "component": "views/System/index.vue",
                "isMenu": 1,
                "icon": "Location",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 2,
                "isAuth": null,
                "parentId": 16,
                "createTime": "2023-05-30T16:58:04",
                "updateTime": "2023-06-04T15:53:50"
            },
            {
                "id": 3,
                "name": "user",
                "title": "用户管理",
                "remark": "用户管理",
                "path": "/user",
                "component": "views/User/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": null,
                "sort": 5,
                "level": 2,
                "isAuth": null,
                "parentId": 16,
                "createTime": "2023-05-30T16:58:25",
                "updateTime": "2023-06-04T16:14:16"
            },
            {
                "id": 4,
                "name": "permission",
                "title": "权限管理",
                "remark": "权限管理",
                "path": "/permission",
                "component": "views/Permission/index.vue",
                "isMenu": 1,
                "icon": "Setting",
                "redirect": null,
                "meta": null,
                "sort": 3,
                "level": 2,
                "isAuth": null,
                "parentId": 16,
                "createTime": "2023-05-30T16:59:28",
                "updateTime": "2023-06-04T15:53:54"
            },
            {
                "id": 5,
                "name": "permissionuser",
                "title": "用户管理",
                "remark": "用户管理",
                "path": "/permission/user",
                "component": "views/Permission/User/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": null,
                "sort": 0,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T16:59:54",
                "updateTime": "2023-06-04T15:53:56"
            },
            {
                "id": 6,
                "name": "permissionrole",
                "title": "角色管理",
                "remark": "角色管理",
                "path": "/permission/role",
                "component": "views/Permission/Role/index.vue",
                "isMenu": 1,
                "icon": "Management",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T17:00:19",
                "updateTime": "2023-06-04T15:53:58"
            },
            {
                "id": 7,
                "name": "permissionmenu",
                "title": "菜单管理",
                "remark": "菜单管理",
                "path": "/permission/menu",
                "component": "views/Permission/Menu/index.vue",
                "isMenu": 1,
                "icon": "Menu",
                "redirect": null,
                "meta": null,
                "sort": 2,
                "level": 3,
                "isAuth": null,
                "parentId": 4,
                "createTime": "2023-05-30T17:00:40",
                "updateTime": "2023-06-04T15:54:00"
            },
            {
                "id": 8,
                "name": "userlist",
                "title": "用户列表",
                "remark": "用户列表",
                "path": "/user/list",
                "component": "views/User/List/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-05-30T17:01:10",
                "updateTime": "2023-06-04T15:54:02"
            },
            {
                "id": 9,
                "name": "userpass",
                "title": "密码管理",
                "remark": "密码管理",
                "path": "/user/password",
                "component": "views/User/Password/index.vue",
                "isMenu": 1,
                "icon": "Lock",
                "redirect": null,
                "meta": null,
                "sort": 2,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-05-30T17:03:00",
                "updateTime": "2023-06-04T15:54:03"
            },
            {
                "id": 10,
                "name": "systemmenu",
                "title": "菜单管理",
                "remark": "菜单管理",
                "path": "/system/menu",
                "component": "views/System/Menu/index.vue",
                "isMenu": 1,
                "icon": "Menu",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 3,
                "isAuth": null,
                "parentId": 2,
                "createTime": "2023-05-30T22:15:14",
                "updateTime": "2023-06-04T15:54:05"
            },
            {
                "id": 11,
                "name": "useradd",
                "title": "用户添加",
                "remark": "用户添加",
                "path": "/user/add",
                "component": "views/User/Add/index.vue",
                "isMenu": 1,
                "icon": "Management",
                "redirect": null,
                "meta": null,
                "sort": 3,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-06-01T18:08:36",
                "updateTime": "2023-06-04T15:54:06"
            },
            {
                "id": 12,
                "name": "useredit",
                "title": "用户修改",
                "remark": "用户修改",
                "path": "/user/edit",
                "component": "views/User/Edit/index.vue",
                "isMenu": 1,
                "icon": "Edit",
                "redirect": null,
                "meta": null,
                "sort": 4,
                "level": 3,
                "isAuth": null,
                "parentId": 3,
                "createTime": "2023-06-02T16:53:31",
                "updateTime": "2023-06-04T15:54:09"
            },
            {
                "id": 13,
                "name": "404",
                "title": "404",
                "remark": "404",
                "path": "/401",
                "component": "views/404/index.vue",
                "isMenu": 0,
                "icon": "House",
                "redirect": null,
                "meta": null,
                "sort": 0,
                "level": 1,
                "isAuth": null,
                "parentId": 0,
                "createTime": "2023-06-04T13:10:25",
                "updateTime": "2023-06-04T15:32:03"
            },
            {
                "id": 14,
                "name": "login",
                "title": "登陆",
                "remark": "登陆",
                "path": "/login",
                "component": "views/Login/index.vue",
                "isMenu": 0,
                "icon": "House",
                "redirect": null,
                "meta": null,
                "sort": 1,
                "level": 1,
                "isAuth": null,
                "parentId": 0,
                "createTime": "2023-06-04T13:11:00",
                "updateTime": "2023-06-04T16:49:01"
            },
            {
                "id": 15,
                "name": "404",
                "title": "404",
                "remark": "404",
                "path": "/:pathMatch(.*)*",
                "component": "views/404/index.vue",
                "isMenu": 0,
                "icon": "House",
                "redirect": null,
                "meta": null,
                "sort": 3,
                "level": 1,
                "isAuth": null,
                "parentId": 0,
                "createTime": "2023-06-04T13:11:50",
                "updateTime": "2023-06-04T16:48:56"
            },
            {
                "id": 16,
                "name": "root",
                "title": "root",
                "remark": "根路径",
                "path": "/",
                "component": "layout/home/index.vue",
                "isMenu": 0,
                "icon": "House",
                "redirect": "/home",
                "meta": null,
                "sort": 2,
                "level": 1,
                "isAuth": null,
                "parentId": 0,
                "createTime": "2023-06-04T14:24:39",
                "updateTime": "2023-06-04T16:48:59"
            },
            {
                "id": 17,
                "name": "systemroute",
                "title": "路由管理",
                "remark": "路由管理",
                "path": "/system/route",
                "component": "views/System/Route/index.vue",
                "isMenu": 1,
                "icon": "Setting",
                "redirect": null,
                "meta": null,
                "sort": 5,
                "level": 3,
                "isAuth": null,
                "parentId": 2,
                "createTime": "2023-06-04T15:56:26",
                "updateTime": "2023-06-04T16:13:12"
            },
            {
                "id": 18,
                "name": "haha",
                "title": "Haha测试",
                "remark": "哈哈哈",
                "path": "/haha",
                "component": "views/Haha/index.vue",
                "isMenu": 1,
                "icon": "User",
                "redirect": null,
                "meta": "{\n\t\"hello\": \"world\"\n}",
                "sort": 1,
                "level": 1,
                "isAuth": null,
                "parentId": 16,
                "createTime": "2023-06-05T18:25:32",
                "updateTime": null
            },
            {
                "id": 28,
                "name": "hah",
                "title": "hah",
                "remark": "hah",
                "path": "/h1",
                "component": "views/haha/hah.vue",
                "isMenu": 0,
                "icon": "Setting",
                "redirect": null,
                "meta": "{\n\t\"hello\": \"world\"\n}",
                "sort": 0,
                "level": 1,
                "isAuth": null,
                "parentId": 0,
                "createTime": "2023-06-05T18:56:36",
                "updateTime": "2023-06-05T18:59:55"
            },
            {
                "id": 29,
                "name": "xixi",
                "title": "Xixi测试",
                "remark": "xixi",
                "path": "/haha/xixi",
                "component": "views/Haha/Xixi/index.vue",
                "isMenu": 0,
                "icon": "User",
                "redirect": null,
                "meta": "{\n\t\"hello\": \"world\"\n}",
                "sort": 0,
                "level": 2,
                "isAuth": null,
                "parentId": 18,
                "createTime": "2023-06-05T19:10:02",
                "updateTime": null
            }
        ];

     const treeify=(list,level)=>{

         if(!list||list.length===0)
             return []

         const newRoots=[]
        const roots=list.filter(item=>item.level===level)

         if(!roots||roots.length===0)
             return []

         roots.forEach(root=>{
            const newRoot={...root}
            newRoots.push(newRoot)
            const children=list.filter(item=>{
                if(newRoots.id===item.parentId){
                    item.parent=newRoot
                    return true
                }
                return false
            })

            newRoot.children=treeify(children,level+1)

        })
        return newRoots
    }



    console.log(getParentPath("/user/password",routes,parentPath))
    console.log(parentPath.reverse())

    console.log(data)
    console.log(treeify(data,1))
</script>
</html>